export default function TodoList({ todos, toggleTodo, deleteTodo }) {
  return (
    <>
       <h1 className="header">Todo List</h1>
      {todos.length === 0 && <div>No todos, please add first</div>}

      <ul className="list">
        {todos.map((todo) => (
          <li key={todo.id}>
            <label>
              <input
                type="checkbox"
                onChange={(e) => toggleTodo(todo.id, e.target.checked)}
                checked={todo.completed}
              />{" "}
              {todo.title}
            </label>
            <button
              className="btn btn-danger"
              onClick={() => deleteTodo(todo.id)}
            >
              Delete
            </button>
          </li>
        ))}
      </ul>
    </>
  );
}